<template>
  <div class="health-category page-container">
    <div class="bg">
      <div class="module-container">
        <div class="module-header">
          <icon name="heartbeat" class="header-icon"></icon>
          <span class="header-title">健康</span>
        </div>
        <div class="module-content">
          <dv-border-box-12 class="content-box">
            <div class="content-wrapper">
              <!-- 模块选择器 -->
              <div class="module-selector">
                <div
                  v-for="module in modules"
                  :key="module.value"
                  class="module-option"
                  :class="{ active: selectedModule === module.value }"
                  @click="selectModule(module.value)"
                >
                  <icon :name="module.icon" class="module-icon"></icon>
                  <span class="module-label">{{ module.label }}</span>
                </div>
              </div>

              <!-- 模块内容 -->
              <div class="module-view">
                <component :is="currentComponent"></component>
              </div>
            </div>
          </dv-border-box-12>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin"
import Medical988 from '../components/health/Medical988.vue'
import PhysicalExerciseTable from '../components/health/PhysicalExerciseTable.vue'

export default {
  mixins: [drawMixin],
  name: 'HealthCategory',
  components: {
    Medical988,
    PhysicalExerciseTable
  },
  data() {
    return {
      selectedModule: 'medical',
      modules: [
        { label: '988就医情况', value: 'medical', icon: 'hospital' },
        { label: '体育锻炼', value: 'physical', icon: 'running' }
      ]
    }
  },
  computed: {
    currentComponent() {
      switch(this.selectedModule) {
        case 'medical':
          return Medical988
        case 'physical':
          return PhysicalExerciseTable
        default:
          return Medical988
      }
    }
  },
  methods: {
    selectModule(moduleValue) {
      this.selectedModule = moduleValue
    }
  },
  mounted() {
    // 触发重新计算大屏缩放比例
    setTimeout(() => {
      this.calcRate()
    }, 100)

    // 根据路由参数设置当前选中的模块
    const moduleParam = this.$route.query.module
    if (moduleParam && this.modules.some(m => m.value === moduleParam)) {
      this.selectedModule = moduleParam
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/common.scss';

.health-category {
  .module-container {
    height: 100%;
    display: flex;
    flex-direction: column;

    .module-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .header-icon {
        font-size: 24px;
        color: #68d8fe;
        margin-right: 10px;
      }

      .header-title {
        font-size: 22px;
        font-weight: bold;
        color: #68d8fe;
      }
    }

    .module-content {
      flex: 1;

      .content-box {
        height: 100%;
        padding: 20px;
      }

      .content-wrapper {
        height: 100%;
        background-color: rgba(19, 25, 47, 0.6);
        padding: 20px;
        display: flex;
        flex-direction: column;

        .module-selector {
          display: flex;
          margin-bottom: 20px;
          background-color: rgba(15, 19, 37, 0.8);
          border-radius: 8px;
          padding: 10px;
          border: 1px solid rgba(104, 216, 254, 0.3);

          .module-option {
            display: flex;
            align-items: center;
            padding: 10px 20px;
            margin-right: 10px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            color: #d3d6dd;

            &:hover {
              background-color: rgba(104, 216, 254, 0.1);
            }

            &.active {
              background-color: rgba(104, 216, 254, 0.2);
              color: #68d8fe;
              border-bottom: 2px solid #68d8fe;
            }

            .module-icon {
              font-size: 16px;
              margin-right: 8px;
            }

            .module-label {
              font-size: 14px;
            }
          }
        }

        .module-view {
          flex: 1;
          overflow: hidden;
          position: relative;
        }
      }
    }
  }
}
</style>
